<template>
    <div class="loading">
        <Loading vertical color="#0094ff" text-color="#0094ff">加载中...</Loading>
    </div>
</template>

<script setup lang="ts">
import { Loading } from 'vant';
import { reactive } from 'vue'

const FONT_SIZE = {
    samll: {
        icon: '16px',
        p: '12px'
    },
    default: {
        icon: '20px',
        p: '16px'
    },
    large: {
        icon: '24px',
        p: '20px'
    }
}

const state = reactive({
    loading: {
        text: '加载中...',
        fontSize: {
            icon: '20px',
            p: '16px'
        },
    } as { text?: string, fontSize?: { icon: string, p: string } }
})

function updateInfo(params: { text: string; size: 'samll' | 'default' | 'large' }) {
    state.loading = {
        text: params.text,
        fontSize: FONT_SIZE[params.size],
    }
}
defineExpose({ updateInfo })
</script>

<style lang="less" scoped>
.loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.1);
    z-index: 999999;
}
</style>